<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>uCharts高性能跨全端图表</title>
    <style>
        body { background-color: #FFFFFF; }
    </style>
</head>
<body>
<div class="page-wrapper">
    <div class="content-wrapper">
        <div class="background-wrapper">
            <canvas id="myCanvas" width="600" height="400" style="border:1px solid #d3d3d3;">Your browser does not support the HTML5 canvas tag.</canvas>
        </div>
        <div class="content-main animate">
            
        </div>
    </div>
</div>
<script  src="assets/js/u-charts.js"></script>
<script  src="assets/js/jquery-2.2.1.min.js"></script>
<script language="JavaScript">
var canvaPie;

var chartData={"series":[{"name":"一班","data":50,"formatter":function(val){return "一班:50人";}},{"name":"二班","data":30},{"name":"三班","data":20},{"name":"四班","data":18},{"name":"五班","data":8}]};

function showPie(canvasId,chartData){
  var ctx=document.getElementById(canvasId).getContext("2d");
	canvaPie=new uCharts({
    type:'pie',
		context:ctx,
		fontSize:11,
		padding:[15,15,0,15],
		legend:{
			show:true,
			padding:5,
			lineHeight:11,
			margin:0,
		},
		background:'#FFFFFF',
		pixelRatio:1,
		series: chartData.series,
		animation: true,
		width: 600,
		height: 400,
		dataLabel: true,
		extra: {
			pie: {
	      border:true,
	      borderColor:'#FFFFFF',
	      borderWidth:3
			}
		},
	});
}

$('#myCanvas')[0].onmousedown=function(e) {
	canvaPie.showToolTip(getH5Offset(e), {
		format: function (item) {
			return item.name + ':' + item.data 
		}
	});
	canvaPie.touchLegend(getH5Offset(e),{animation:true});
};


showPie('myCanvas',chartData);

</script>

</body>